<template>
	<view class="body">
		<!-- 导航栏 + 轮播图 -->
		<view class="carousel-container">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="titleText">吸米多徕客</view>
				<!-- <image class="logo"
					src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/homeLogo.png"></image> -->
			</view>
			<!-- 轮播图 -->
			<u-swiper height="312" :bottom="false" :list="swiperImages" indicator indicatorMode="line" circular
				indicatorActiveColor="#2393FF" indicatorInactiveColor="#FFFFFF"></u-swiper>
		</view>
		<!-- 未登录 -->
		<view class="noLogin flex" v-if="!hasLogin">
			<image class="userAvatar" src="@/static/images/userAvatar.png" mode=""></image>
			<text class="text" @click="goLogin">立即登录</text>
		</view>
		<!-- 已登录 -->
		<view class="noLogin" v-else>
			<view class="top">
				<view class="left flex">
					<image class="userAvatar" :src="hasLogin?userInfo.avatar:'@/static/images/userAvatar.png'" mode="">
					</image>
					<view class="">
						<view class="flex">
							<text class="text mr32">{{userInfo.nickname}}</text>
							<text class="vip"
								v-if="userInfo.platformLevelDo && userInfo.platformLevelDo.levelName">{{userInfo.platformLevelDo.levelName}}</text>
						</view>
						<view class="flex phoneBox">
							<image class="phoneIcon" src="@/static/images/phone.png" mode=""></image>
							<view class="text">{{userInfo.phone.substr(0,3) + "****" + userInfo.phone.substr(7)}}</view>
						</view>
					</view>
				</view>
				<view class="right" @click="goCodePage">
					<image class="qrcode" src="@/static/images/code.png" mode=""></image>
					<view class="text">推广名片</view>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<text class="num">{{membersNumber}}</text>
					<view class="flex gap">
						<image class="icon" src="@/static/images/user.png" mode=""></image>
						<view class="text">商家会员数</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<text class="num">{{storeNumber}}</text>
					<view class="flex gap">
						<image class="icon2" src="@/static/images/store.png" mode=""></image>
						<view class="text">商户数量</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="cardBox">
				<image @click="goXiangmu()"
					:src="joinusImg.length>0&&joinusImg[0]?joinusImg[0]:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon10.png'"
					mode="">
				</image>
				<image @click="goZhaoshang()"
					:src="cooperationImg.length>0&&cooperationImg[0]?cooperationImg[0]:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon9.png'"
					mode="">
				</image>
			</view>
			<!-- 金刚区 -->
			<!-- <view class="kingkong-area">
				<view class="kingkong-item" v-for="(item, index) in jingangList" :key="index" @click="goJingang(item)">
					<image :src="item.icon" mode="aspectFit"></image>
					<p>{{ item.name }}</p>
				</view>
			</view> -->
			<!-- 合作品牌 -->
			<view class="board">
				<view class="title flex">
					<view class="lineText"></view>合作品牌
				</view>
				<scroll-view scroll-x="true" class="scrollView">
					<image v-for="(item,index) in boardList" :key="index" class="scrollImg" :src="item" mode="">
					</image>
				</scroll-view>
			</view>
			<!-- 系统工具 -->
			<view class="storeType">
				<view class="more flex" @click="goAboutUs">查看更多详情
					<image class="rightR"
						src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon5.png" mode="">
					</image>
				</view>
				<view class="flex-between">
					<view class="left">
						<view class="title">系统工具</view>
						<view class="flex" @click="goodDetail(categoryProducts[0])">
							<image class="storeImg" :src="categoryProducts[0].picture" mode=""></image>
							<view class="content">
								<view class="title2 ellipsis" v-if="categoryProducts[0].goodsName=='爆客标准版'">标准版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[0].goodsName=='运营专业版'">专业版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[0].goodsName=='商业旗舰版'">旗舰版</view>
								<view class="tip">限时特惠中</view>
								<view class="link flex-all-center">
									点击了解
									<image class="arrow"
										src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon6.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="right" v-if="categoryProducts.length>1">
						<view class="top flex" @click="goodDetail(categoryProducts[1])">
							<view class="" style="margin-right: 36rpx;">
								<view class="title2 ellipsis" v-if="categoryProducts[1].goodsName=='爆客标准版'">标准版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[1].goodsName=='运营专业版'">专业版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[1].goodsName=='商业旗舰版'">旗舰版</view>
								<view class="tip2">限时特惠中</view>
								<image class="arrow"
									src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon7.png"
									mode=""></image>
							</view>
							<image class="storeImg2" :src="categoryProducts[1].picture" mode=""></image>
						</view>
						<view class="top flex" style="padding-top: 70rpx;" @click="goodDetail(categoryProducts[2])">
							<view class="" style="margin-right: 36rpx;">
								<view class="title2 ellipsis" v-if="categoryProducts[2].goodsName=='爆客标准版'">标准版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[2].goodsName=='运营专业版'">专业版</view>
								<view class="title2 ellipsis" v-if="categoryProducts[2].goodsName=='商业旗舰版'">旗舰版</view>
								<view class="tip2">限时特惠中</view>
								<image class="arrow"
									src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon7.png"
									mode=""></image>
							</view>
							<image class="storeImg2" :src="categoryProducts[2].picture" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 页签 -->
			<!-- <zb-tab shrink="true" lineWidth="40rpx" :activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)'}"
				:data="tabList" v-model="active" @change="onTabChange"></zb-tab> -->
			<!-- 视频案例 -->
			<!-- <view class="videoBox" v-if="active == 7">
				<view class="video-container" v-for="(item, index) in dataList" :key="index"
					@click="goVideoDetail(item.id)">
					<image class="custom-video" :src="item.videoCover" mode=""></image>
					<view class="overlay"></view> 
					<view class="pause-overlay">
						<image src="../../static/images/stop.png" mode="" class="pause-icon"></image>
					</view>
					<view class="duration">{{item.duration}}</view>
					<p class="video-title">{{item.videoName}}</p>
				</view>
			</view> -->
			<!-- 行业成功案例 -->
			<view class="board">
				<view class="title flex">
					<view class="lineText"></view>行业成功案例
				</view>
				<u-tabs :list="cateList" :activeStyle="{ color: '#2393FF' }" @change="changeTab"></u-tabs>
				<view class="textBox">
					<view class="" v-if="dataList.length>0">
						<view v-for="(item, index) in dataList" :key="index" @click="goArticleDetail(item)"
							style="display: flex;padding: 20rpx 0rpx;">
							<image :src="item.cover" mode=""></image>
							<view class="leftContent">
								<view class="">
									<p class="text-title">
										{{ item.title }}
									</p>
									<view class="desc">{{item.briefIntroduction?item.briefIntroduction:''}}</view>
								</view>
								<text class="text-tag" v-if="item.typeName">
									{{ item.typeName }}
								</text>
							</view>
						</view>
					</view>
					<view class="" v-else>
						<emptyPage title="暂无案例～"></emptyPage>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getArticleList
	} from '../../api/extension.js';
	import {
		postLogSave
	} from '@/api/api.js';
	import {
		getUserInfo,
		getTabPage,
		getHomeTypes,
		getMerchantlnfo,
		getBanner
	} from '@/api/user.js';
	import {
		getplatformLevel
	} from '@/api/xing.js';
	import emptyPage from '@/components/emptyPage.vue';
	import {
		postGoodsType,
		postGoodsPage
	} from '@/api/cate';
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				swiperImages: [],
				swiperImages02: [
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/bag03.png',
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/bag04.png'
				],
				jingangList: [{
						id: 1,
						icon: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/jingang01.png',
						name: '系统介绍',
						url: ''
					},
					{
						id: 2,
						icon: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/jingang02.png',
						name: '素材中心',
						url: ''
					},
					{
						id: 3,
						icon: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/jingang03.png',
						name: '我的名片',
						url: ''
					},
					{
						id: 4,
						icon: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/jingang04.png',
						name: '我的推广',
						url: ''
					}
				],
				tabList: [
					// {
					// 	name: '视频案例',
					// 	value: 7
					// },
					{
						name: '图文案例',
						value: 5
					}
				],
				active: 5,
				userName: '',
				userId: '',
				pageNum: 1, // 当前页码
				pageSize: 99, // 每页的数据量
				dataList: [], // 列表数据
				userInfo: {},
				hasLogin: false,
				listType: [{
					name: '全部',
				}, {
					name: '健康行业',
				}, {
					name: '医美行业'
				}, {
					name: '餐饮行业'
				}, {
					name: '零售行业'
				}],
				membersNumber: 0, //商家会员数
				storeNumber: 0, //商户数量
				cateList: [], //文章分类
				categoryProducts: [],
				boardList: [], //合作品牌
				joinusImg: [], //加入我们图片
				cooperationImg: [], //招商合作图片
				shareImg: [], //首页分享图片
			};
		},
		onShareAppMessage() {
			return {
				title: '多徕客科技',
				imageUrl: this.shareImg.length > 0 && this.shareImg[0] ? this.shareImg[0] :
					"https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/bag01.png"
			};
		},
		onShareTimeline() {
			return {
				title: '多徕客科技',
				imageUrl: this.shareImg.length > 0 && this.shareImg[0] ? this.shareImg[0] :
					"https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/bag01.png"
			};
		},
		onLoad(option) {
			this.getAllImage()
			this.fetchAllCategoriesAndProducts()
			this.getData()
			this.getLevel()
			//本地没有门店id，就存储
			if (!uni.getStorageSync('storeId')) {
				uni.setStorageSync('storeId', 0)
			}
			if (option.q) {
				let codeStr = decodeURIComponent(option.q);
				const codeId = codeStr.match(/[?&]pid=(\d+)/);
				option.pid = codeId ? codeId[1] : null;
				if (option.pid) {
					uni.setStorageSync('pid', option.pid);
					console.log("onLoad有pid，存储", option.pid);
				}
			} else if (option.pid) {
				uni.setStorageSync('pid', option.pid);
				console.log("有pid，存储");
			}
		},
		onShow() {
			this.getUserList()

			let self = this
			// self.dataList = []
			// self.pageNum = 1;
			const pid = uni.getStorageSync('pid');
			console.log(pid, "onShow获取pid")
			if (pid) {
				if (!uni.getStorageSync("LOGIN_STATUS_TOKEN")) {
					console.log("onShow有pid，未登录，去登录")
					uni.navigateTo({
						url: '/pages/users/wechat_login/index'
					})
				} else {
					console.log("onShow有pid，已登录，调用绑定")
					self.postSave(pid);
				}
			}
		},
		// 监听页面触底事件
		// onReachBottom() {
		// 	this.getList(); // 触底加载下一页
		// },
		methods: {
			//获取用户信息
			getUserList() {
				getUserInfo().then(res => {
					if (res.data) {
						this.userInfo = res.data
						this.hasLogin = true;
						this.getStoreInfo()
					} else {
						this.hasLogin = false;
						// uni.navigateTo({
						// 	url: '/pages/users/wechat_login/index'
						// })
					}
				})
			},
			postSave(pid) {
				const data = {
					uid: pid
				};
				postLogSave(data).then(res => {
					console.log("绑定成功，删除pid")
					uni.removeStorageSync('pid');
					this.$util.Tips({
						title: '绑定成功！'
					});
				}).catch(err => {
					console.log("绑定失败，删除pid")
					uni.removeStorageSync('pid');
					this.$util.Tips({
						title: '绑定失败，请重试！'
					});
				});
			},
			getList(typeId) {
				getTabPage({typeId}).then(res => {
					if (res.data && res.data.records) {
						this.dataList = [...this.dataList, ...res.data.records];
						this.pageNum += 1; // 加载完后页数加1
					}
				})
			},
			// 获取轮播图  合作品牌
			getAllImage() {
				getBanner().then(res => {
					res.data.records.map(item => {
						if (item.typeName == '首页轮播图') {
							this.swiperImages.push(item.cover)
						} else if (item.typeName == '合作品牌') {
							this.boardList.push(item.cover)
						} else if (item.typeName == '关于我们') {
							this.joinusImg.push(item.cover)
						} else if (item.typeName == '招商合作') {
							this.cooperationImg.push(item.cover)
						} else if (item.typeName == '分享封面') {
							this.shareImg.push(item.cover)
						}

					})
				})
				// getBanner({typeName:'合作品牌'}).then(res=>{
				// 	this.boardList =res.data.records.map(item=>item.cover)
				// })
			},
			goXiangmu() {
				uni.navigateTo({
					url: "/pages/users/aboutUs/aboutUs"
				});
				// uni.navigateTo({
				// 	url: '/pages/platform/article/index?id=26'
				// });
			},
			goZhaoshang() {
				uni.navigateTo({
					url: "/pages/goods_list/index?goodsTypeId=42"
				});
			},
			goVideoDetail(id, name) {
				uni.navigateTo({
					url: '/pages/about/detail?id=' + id + '&type=' + '视频案例'
				});
			},
			goArticleDetail(item) {
				uni.navigateTo({
					url: "/pages/platform/article/index?id=" + item.id
				});
			},
			// 去详情页
			goodDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				});
			},

			getData() {
				getHomeTypes().then(res => {
					this.cateList = [{
						name: '全部',
						id: ''
					}]
					res.data && res.data.forEach(item => {
						if (item.name != '视频案例' && item.name != '系统介绍') {
							console.log(item.name);
							this.cateList.push(item)
						}
					});
					this.getList('');
				})
			},
			// 切换tab
			changeTab(e) {
				console.log(e);
				this.dataList = []
				this.pageNum = 1
				console.log(e.id);
				this.getList(e.id);
			},
			//获取商家信息
			getStoreInfo() {
				getMerchantlnfo(this.userInfo.uid).then(res => {
					this.membersNumber = res.data.membersNumber
					this.storeNumber = res.data.storeNumber
				})
			},
			// 跳转到推广名片页面
			goCodePage() {
				uni.navigateTo({
					url: '/pages/users/promoteCard/index'
				});
			},
			// 跳转登录页面
			goLogin() {
				uni.navigateTo({
					url: "/pages/users/wechat_login/index"
				});
			},
			// 跳转加入我们页面
			goAboutUs() {
				uni.switchTab({
					url: "/pages/goods_cate/goods_cate"
				});
			},
			// 获取爆客工具及其商品
			fetchAllCategoriesAndProducts() {
				this.get_product_list()
				// postGoodsType({
				// 	"status": null,
				// 	"isOpen":0,
				// }).then(res => {
				// 	const records = res.data.records || [];
				// 	let id = '';
				// 	records.map(record => {
				// 		if(record.goodsType=="系统工具"){
				// 			return record.id
				// 		}
				// 	});

				// });
			},
			// 查找产品
			get_product_list() {
				let where = {
					goodsTypeId: 43,
					page: 1
				};
				postGoodsPage(where).then(res => {
					let list = res.data.records || [];
					for (var i = 0; i < list.length; i++) {
						list[i].blurb = list[i].blurb ? list[i].blurb.replace(/<[^>]+>/g, '') : '';
					}
					// this.$set(this.categoryProducts, list);
					this.categoryProducts = list
					console.log(this.categoryProducts);
				}).catch(err => {});
			},
			// 获取用户等级
			getLevel() {
				getplatformLevel().then(res => {
					let list = [{
						text: '默认排序',
						value: ''
					}]
					res.data && res.data.forEach(item => {
						list.push({
							text: item.levelName,
							value: item.id,
						})
					})
					uni.setStorageSync('filterData', JSON.stringify([list]))
				})
			},
		},
	};
</script>

<style lang="scss">
	@import '@/uni.scss';

	.body {
		min-height: 100vh;
		background-color: #EEF8FF;
		position: relative;
	}

	#myVideo {
		width: 100%;
		height: 380rpx;
		position: relative;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.carousel-container {
		position: relative;
		z-index: 1;

		.custom-navbar {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 88rpx;
			position: absolute;
			top: 80rpx;
			left: 0;
			right: 0;
			z-index: 2;

			.logo {
				width: 240rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.navbar-title {
				font-size: 36rpx;
				color: #333;
			}
		}

		.swiper {
			width: 100%;
			height: 624rpx;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.contentTitle {
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
		margin-top: 20rpx;
	}

	.blue {
		width: 180rpx;
		height: 14rpx;
		background: linear-gradient(90deg, #0B87FB 0%, #fff 100%);
		border-radius: 6rpx;
		opacity: 0.15;
		margin-top: -10rpx;
	}

	.contentBox {
		padding: 0 32rpx 32rpx;
		background-color: #EEF8FF;

		.cardBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: -14rpx;

			image {
				width: 331rpx;
				height: 192rpx;
			}
		}

		.kingkong-area {
			margin: 36rpx 0rpx;
			display: flex;

			.kingkong-item {
				width: 25%;
				text-align: center;

				image {
					width: 106rpx;
					height: 106rpx;
				}

				p {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-top: 10rpx;
					text-align: center;
				}
			}
		}

		.swiper02 {
			width: 100%;
			height: 180rpx;

			.swiper-image02 {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
		}

		.videoBox {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 20rpx;

			.custom-video {
				width: 100%;
				height: 180rpx;
				border-radius: 30rpx;
			}

			.video-container {
				position: relative;
				width: calc(50% - 12rpx);
				height: 260rpx;
				border-radius: 20rpx;
				background-color: #F7F8FB;

			}

			.overlay {
				/* 新增蒙层样式 */
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 180rpx;
				border-radius: 30rpx;
				/* 保持与视频封面相同的圆角 */
				background: rgba(0, 0, 0, 0.5);
				/* 黑色半透明背景 */
				z-index: 5;
				/* 蒙层应该位于暂停图标之下 */
			}

			.pause-overlay {
				position: absolute;
				top: 36%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
			}

			.pause-icon {
				width: 60rpx; // 调整到适合的尺寸
				height: 60rpx; // 调整到适合的尺寸
			}

			.duration {
				position: absolute;
				bottom: 90rpx;
				right: 10rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 10rpx;
				padding: 0 10rpx;
				color: white;
				font-size: 24rpx;
			}

			.video-title {
				height: 88rpx;
				padding: 10rpx;
				font-size: 28rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}



		}

		.textBox {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-top: 20rpx;

			.leftContent {
				width: 70%;
			}

			.text-title {
				padding: 0rpx 0 0 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;

			}

			.desc {
				padding: 20rpx 0 0rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #9E9E9E;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				margin-bottom: 20rpx;
			}

			.text-tag {
				display: inline;
				background: rgba(35, 147, 255, 0.2392);
				border-radius: 8rpx;
				padding: 8rpx 10rpx;
				font-size: 24rpx;
				color: #2393FF;
				margin-left: 20rpx;
			}

			image {
				width: 236rpx;
				height: 206rpx;
				border-radius: 10rpx;
			}
		}
	}

	.titleText {
		font-weight: bold;
		color: #28314C;
		font-size: 34rpx;
	}

	.noLogin {
		position: relative;
		z-index: 2;
		margin: -68rpx 32rpx 24px;
		padding: 40rpx 24rpx;
		background: linear-gradient(180deg, #CCE3FD 0%, #F4F9FF 16%, #FFFFFF 100%);
		box-shadow: 0px 6px 12px 2px rgba(204, 204, 204, 0.16);
		border-radius: 12px 12px 12px 12px;
		border: 2px solid #FFFFFF;

		.userAvatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			margin-right: 12rpx;
		}

		.text {
			font-size: 32rpx;
			font-weight: bold;
			color: #28314C;
		}

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.102);

			.left {
				.phoneIcon {
					width: 23rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}

				.phoneBox {
					margin-top: 14rpx;

					.text {
						font-family: D-DIN, D-DIN;
						font-weight: 700;
						font-size: 24rpx;
						color: #637697;
					}
				}

				.vip {
					border-radius: 4rpx 4rpx 20rpx 4rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #28314C;
					padding: 2rpx 20rpx;
					background: linear-gradient(91deg, #F2F2F4 0%, #CBCED4 100%);
				}

				.mr32 {
					margin-right: 24rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.qrcode {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}

				.text {
					font-family: PingFang SC Medium, PingFang SC Medium;
					font-size: 24rpx;
					color: #515B71;
					font-weight: 400;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding-top: 26rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-family: D-DIN, D-DIN;
					font-weight: 700;
					font-size: 56rpx;
					color: #2393FF;
				}

				.icon {
					width: 24rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}

				.icon2 {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}

				.gap {
					margin: 12rpx 0 0 0;
				}

				.text {
					font-size: 24rpx;
					color: #28314C;
					font-weight: 400;
				}
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-all-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-between {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.line {
		width: 2rpx;
		height: 115rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.102);
	}

	.board {
		margin: 24rpx 0;

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			margin-bottom: 20rpx;
			font-family: "Alibaba PuHuiTi 2.0-85 Bold"
		}

		.lineText {
			width: 8rpx;
			height: 34rpx;
			background: #2393FF;
			border-radius: 4px 4px 4px 4px;
			margin-right: 12rpx;
		}

		.scrollImg {
			width: 234rpx;
			height: 254rpx;
			margin-right: 23rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.scrollView {
			white-space: nowrap;
			width: 100%;
		}
	}

	.storeType {
		position: relative;
		width: 686rpx;
		height: 336rpx;
		background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon8.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// .storeBg {
		// 	position: absolute;
		// 	top: 0;
		// 	bottom: 0;
		// 	z-index: -1;
		// 	width: 686rpx;
		// 	height: 336rpx;
		// }

		.title {
			padding: 22rpx 24rpx 22rpx 0;
			font-weight: 700;
			font-size: 28rpx;
			color: #28314C;
		}

		.left {
			padding: 0rpx 0 0 24rpx;

			.content {
				height: 138rpx;

				.title2 {
					width: 168rpx;
					font-weight: 700;
					font-size: 28rpx;
					color: #28314C;
				}

				.tip {
					font-weight: 700;
					font-size: 20rpx;
					color: #FF760A;
				}

				.link {
					width: 128rpx;
					height: 44rpx;
					box-sizing: border-box;
					background: #28314C;
					border-radius: 10px 10px 10px 10px;
					font-weight: 700;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-top: 30rpx;
				}

				.arrow {
					width: 18rpx;
					height: 18rpx;
					margin-left: 6rpx;
				}
			}

		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding-right: 24rpx;
			;

			.top {
				padding-top: 38rpx;

				.standand {
					width: 136rpx;
					font-weight: 700;
					font-size: 24rpx;
					color: #28314C;
				}

				.tip2 {
					font-weight: 400;
					font-size: 20rpx;
					color: #637697;
				}

				.arrow {
					width: 18rpx;
					height: 18rpx;
					margin-left: 6rpx;
				}

				.storeImg2 {
					width: 102rpx;
					height: 92rpx;
					border-radius: 8rpx;
					margin-left: 12rpx;
				}
			}
		}

		.storeImg {
			width: 156rpx;
			height: 138rpx;
			border-radius: 8rpx;
			margin-right: 12rpx;
		}
	}

	.more {
		font-size: 24rpx;
		color: #28314C;
		position: absolute;
		bottom: 28rpx;
		left: 32rpx;
	}

	.rightR {
		width: 12rpx;
		height: 22rpx;
		margin-left: 12rpx;
	}
</style>